<template>
  <div id="app">
    <router-view name="header"></router-view>
    <transition name="fade">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition name="fade">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>

    <router-view name="footer"></router-view>

    <div class="center-block" v-if="isLoading" >
      <img  src="../static/img/load.gif" alt="">
    </div>
    <a class="App_phone" href="tel:4008003002"></a>
  </div>
</template>
<script>
  import {Spinner} from "mint-ui"

  export default {
    components: {Spinner},
    computed: {
      isLoading() {
        return this.$store.state.isLoading;
      }
    },
    mounted() {
      var $App_phone = $('.App_phone');
      var left = $(window).width() - 44;
      var bottom = $(window).height() * 0.35 + 35;
      $App_phone.css('left', left);
      $App_phone.css('bottom', bottom);
    }
  }
</script>
<style>
  #app .App_phone {
    position: fixed;
    /*right: 0;*/
    /*top:46%;*/
    width: 44px;
    height: 44px;
    background: url(../static/img/dianhua.png);
    background-size: 100% 100%;
    z-index: 999;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .3s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }
  .zz {
    position: fixed;
    z-index: 10020;
  }
</style>


